<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户角色</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="../../css/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css"/>
    <style type="text/css">
        body {
            overflow-y: scroll;
        }

        .demoTable {
            width: 80%;
            height: 50px;
            margin: 0 auto;
            text-align: center
        }
    </style>

</head>
<body style="margin: 20px;">

<div class="demoTable">
    搜索用户角色关系id：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn layui-btn-sm layui-bg-blue" data-type="reload" id="">搜索</button>
    <!--	<div class="layui-btn layui-btn-sm layui-bg-blue">-->
    <!--		<a href="javascript:0;" class="btn" style="color: white">添加</a>-->
    <!--	</div>-->
</div>


<table class="layui-hide" id="role" lay-filter="role"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="getCheckData">删除选中用户角色</button>
        <button class="layui-btn layui-btn-sm layui-bg-blue btn" lay-event="add">添加</button>
        <!--		<button class="layui-btn layui-btn-sm layui-bg-blue btn" lay-event="findAll" onclick="history.go(0)">查看全部</button>-->
        <button class="layui-inline layui-btn layui-btn-primary layui-btn-sm btn" lay-event="refresh"
                onclick="history.go(0)" style="width: 30px;height: 30px">
            <i class="layui-icon layui-icon-refresh-3" style="color: #0000FF;padding: 3px 0 0 1px"></i></button>

    </div>
</script>

<script type="text/html" id="barDemo">
<!--    <a class="layui-btn layui-btn-xs layui-bg-green" lay-event="give">用户角色管理</a>-->
    <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="../../js/jquery3.js" type="text/javascript" charset="utf-8"></script>

<script>
    function createTime(v){
        var date=new Date(v);
        var y=date.getFullYear();
        var m=date.getMonth();
        m=m<10?'0'+m:m;
        var d=date.getDate();
        d=d<10?'0'+d:d;
        var h=date.getHours();
        h=h<10?'0'+h:h;
        var min=date.getMinutes();
        min=min<10?'0'+min:min;
        var sec=date.getSeconds();
        sec=sec<10?'0'+sec:sec;
        var str=y+"-"+m+"-"+d+" "+h+":"+min+":"+sec;
        return str;
    }

    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#role'
            , url: 'http://localhost:8080/crm/userRole/findAll'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , height: 450
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: '编号', fixed: true, width: 100}
                , {field: 'userId', title: '用户id', fixed: true, width: 100}
                , {field: 'roleId', title: '角色id', fixed: true,width: 100}
                , {field: 'isValid', title: '是否可用',  width: 150}
                ,{field: 'createDate', title: '创建时间', sort: true,templet:function (row) {
                        return createTime(row.createDate);
                    }}
                , {title: '操作', toolbar: '#barDemo',  fixed: 'right'}
            ]]
            , id: 'testReload'
            , page: true
            , done: function (res, curr, count, status) {
                layer.msg("操作成功，共查询到 " + count + " 个用户角色信息");
            }
        });


        //查找id
        var active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        key: demoReload.val()
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            console.log("okkk")
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        })

        //回车键搜索
        $('#demoReload').on('keypress',function () {
            var type = $('.demoTable .layui-btn').data('type');
            active[type] ? active[type].call(this) : '';
        })

        // 头工具栏事件
        table.on('toolbar(role)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    console.log(data)
                    // layer.alert(JSON.stringify(data));
                    layer.confirm('真的删除行么', function (index) {
                        // obj.del();
                        layer.close(index);
                        //向后台发送ajax请求
                        $.ajax({
                            //编写json格式，设置属性和值
                            url: "http://localhost:8080/crm/userRole/deleteMany",
                            contentType: "application/json;charset=utf-8",
                            data:JSON.stringify(data),
                            dataType: "text",
                            type: "post",
                            success: function (data) {
                                //服务器端成功响应的json数据，进行解析
                                console.log(data)
                            }
                        })
                        //返回首页
                        history.go(0)
                    });
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
                case 'add':
                    layer.open({
                        type: 2,
                        title: '<h1 style="font-size: 25px;text-align: center">添加用户角色关系</h1>',
                        shadeClose: true,
                        shade: 0.6,
                        area: ['800px', '75%'],
                        shadowColor: false,
                        content: 'UserRoleForm.html',
                        yes: function(index, layero){
                            //do something

                        },
                    });
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(role)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                console.log("操作：" + obj.event);
                layer.confirm('真的删除行么', function (index) {
                    // obj.del();
                    layer.close(index);
                    //向后台发送ajax请求
                    $.ajax({
                        //编写json格式，设置属性和值
                        url: "http://localhost:8080/crm/userRole/delete?id=" + data.id,
                        contentType: "application/json;charset=utf-8",
                        dataType: "text",
                        type: "post",
                        success: function (data) {
                            //服务器端成功响应的json数据，进行解析
                        }
                    })
                    //返回首页
                    history.go(0)
                });
            } else if (obj.event === 'edit') {
                console.log("操作：" + obj.event);
                // layer.prompt({
                // 	formType: 2
                // 	,value: data.email
                // }, function(value, index){
                // 	obj.update({
                // 		email: value
                // 	});
                // 	layer.close(index);
                // });
                layer.open({
                    type: 2,
                    title: '<h1 style="font-size: 25px;text-align: center">编辑用户角色关系</h1>',
                    shadeClose: true,
                    shade: 0.6,
                    area: ['800px', '75%'],
                    shadowColor: false,
                    content: 'UserRoleForm.html',
                    success: function (layero, index) {
                        //方法一：body.html() body里面的内容
                        var body = layer.getChildFrame('body', index);
                        body.find('#userId').val(data.userId);
                        body.find('#roleId').val(data.roleId);
                        body.find('.isValid').val(data.isValid);
                        //给id赋值
                        body.find('#id').val(data.id);
                    }
                });
            } else if (obj.event === 'show') {
                console.log("操作：" + obj.event);
            }
        });
    });
</script>

</body>
</html>
